{% extends "base_electric.html" %}
{% load custom %}

{% block bodyclass %}{% endblock %}

{% block left_content %}
    <div class="row">
        <div class="well">
            <div class="btn-group">
                <a href="/electric/bar/{{ date|previousweek:"%Y" }}/week/{{ date|previousweek:"%U" }}">
                    <button class="btn btn-small"><i class="icon-step-backward">></i></button>
                </a>
                {#        </div>#}
                {#        <div class="span2 pull-right">#}
                <button class="btn btn-small btn-info disabled">{{ date|date:'DATE_FORMAT' }}</button>
                {% if not date|iscurrentweek %}<a href="/electric/bar/{{ date|nextweek:"%Y" }}/week/{{ date|nextweek:"%U" }}">{% endif %}
                <button class="btn btn-small pull-right {% if date|iscurrentweek %}disabled{% endif %}"><i class="icon-step-forward">></i></button>
                {% if not date|iscurrentweek %}</a>{% endif %}
                {% if not date|iscurrentweek %}<a href="/electric/bar/week/">{% endif %}
                <button class="btn btn-small pull-right {% if date|iscurrentweek %}disabled{% endif %}"><i class="icon-fast-forward">></i></button>
                {% if not date|iscurrentweek %}</a>{% endif %}
            </div>
        </div>
    </div>
    {% if statistics %}
        <div class="row">
            <div class="well">
                <h4>Statistics</h4>
                <br>
                <table class="table table-condensed stat">
                    <thead>
                        <tr>
                            <th></th>
                            <th>used</th>
                            <th>budget</th>
                            <th>last</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>kW·h</th>
                            <td>{{ statistics.kwtotal|floatformat:1 }}</td>
                            <td>{{ statistics.kwbudget|absolute|floatformat:1 }}<br>
                                {{ statistics.budgetpercent|percent }}%
                                {% if statistics.budgetpercent > 0 %}
                                    <i class="icon-arrow-up"></i>
                                {% elif statistics.budgetpercent < 0 %}
                                    <i class="icon-arrow-down"></i>
                                {% endif %}
                            </td>
                            <td>{{ statistics.lastweek|absolute|floatformat:1 }}<br>
                                {{ statistics.lastweekpercent|percent }}%
                                {% if statistics.lastweekpercent > 0 %}
                                    <i class="icon-arrow-up"></i>
                                {% elif statistics.lastweekpercent < 0 %}
                                    <i class="icon-arrow-down"></i>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>$</th>
                            <td>{{ statistics.kwtotalcost|floatformat:2 }}</td>
                            <td>
                                {{ statistics.kwbudgetcost|floatformat:2 }}
                            </td>
                            <td>{{ statistics.lastweekcost|floatformat:2 }}</td>
                        </tr>
                        <tr>
                            <th>$/year</th>
                            <td>{{ statistics.kwyearcost|floatformat:0 }}</td>
                            <td>{{ statistics.kwbudgetcostyear|floatformat:0 }}</td>
                            <td>{{ statistics.lastweekcostyear|floatformat:0 }}</td>
                        </tr>
                    </tbody>
                </table>
                <ul class="unstyled">
                    <li>
                        Est. Cost: $<strong>{{ statistics.kwcost|floatformat:4 }}</strong>/kW·h
                        {% if statistics.lastbill %}
                            based on bill ending on <strong>{{ statistics.lastbill|date:'n/j/Y' }}</strong>
                        {% endif %}
                    </li>
                </ul>
                <ul class="unstyled">
                    <li>Last update:
                        <strong>
                            {% if statistics.lastupdate|istoday %}
                                Today at {{ statistics.lastupdate|date:'P' }}
                            {% else %}
                                {{ statistics.lastupdate|date:'n/j @ P' }}
                            {% endif %}
                        </strong>
                    </li>
                </ul>
            </div>
        </div>
	{% endif %}
{% endblock %}

{% block content_electric %}
    <h1>Electricity Use <small>Week of {{ date|date:'DATE_FORMAT' }}</small></h1>

    <h2>Weekly Summary</h2>
    <div id='chart'>
        <img id="week_chart_image" src="{{ weekchart }}" height="150">
    </div>
    <hr/>

    <h2>Budget
        <small>
            {% if statistics.budgetdate %}budget set
                {% if statistics.budgetdate|istoday %}
                    today
                {% else %}
                    on {{ statistics.budgetdate|date:'DATE_FORMAT' }}
                {% endif %}
            {% else %}
                default budget
            {% endif %}
        </small>
    </h2>
    <p>
        {% if statistics.budgetpercent > 0.01 %}
            <strong>{{ statistics.budgetpercent|percent }}% over</strong>
        {% elif statistics.budgetpercent < -0.01 %}
            <strong>{{ statistics.budgetpercent|percent }}% under</strong>
        {% else %}
            <strong>about even</strong> with
        {% endif %}
        expected usage
        {% if date|iscurrentweek %}
            so far this week.
        {% else %}
            for the week of {{ date|date:'F j, Y' }}
        {% endif %}
    </p>
    <div id="budget_chart">
        <img id="budget_chart_image" src="{{ budgetchart|safe }}" height="34">
    </div>
    <hr/>

    <h2>Scatter</h2>
    <div id="scatter_chart">
        <img id="scatter_chart_image" src="{{ scatterchart }}">
    </div>
{% endblock %}

